<template>
    <div>
        <bread-view :gab="'icon-angle-right'" class="br">
            <bread-item :to="'/'">首页</bread-item>
            <transition name="bread">
                <bread-item>购物车</bread-item>
            </transition>
        </bread-view>
        <div class="cart">
            <table>
                <thead>
                    <tr>
                        <th width="120">
                            <input type="checkbox" v-model="flag" @change="chengAll(flag)">
                        </th>
                        <th width="400">商品信息</th>
                        <th width="220">单价</th>
                        <th width="180">数量</th>
                        <th width="180">小计</th>
                        <th width="140">操作</th>
                    </tr>
                </thead>
                <!-- 有效商品 -->
                <tbody>
                    <tr v-for="(item, key) in listobj" :key="key">
                        <td>
                            <input type="checkbox" v-model="item.selected" @change="changone(key)">
                        </td>
                        <td>
                            <div class="goods">
                                <RouterLink to="/"><img :src="item.picture" alt=""></RouterLink>
                                <div>
                                    <p class="name ellipsis">{{ item.name }}</p>
                                    <!-- 选择规格组件 -->
                                </div>
                            </div>
                        </td>
                        <td class="tc">
                            <p>&yen;{{ item.price }}</p>
                            <p>比加入时降价 <span class="red">&yen;{{ item.nowPrice }}</span></p>
                        </td>
                        <td class="tc">
                            <!-- <XtxNumbox /> -->
                            <!-- <input type="checkbox"> -->
                            <div class="xtx-numbox">
                                <div class="label">数量</div>
                                <div class="numbox">
                                    <a @click="goodsjian">-</a>
                                    {{ item.count }}
                                    <a @click="count++">+</a>
                                </div>
                            </div>
                        </td>
                        <td class="tc">
                            <p class="f16 red">&yen;{{ sum }}</p>
                        </td>
                        <td class="tc">
                            <p><a href="javascript:;">移入收藏夹</a></p>
                            <p><span class="green" @click="delobj(key)">删除</span></p>
                            <p><a href="javascript:;">找相似</a></p>
                        </td>
                    </tr>
                </tbody>
                <!-- 无效商品 -->
            </table>
            <!-- {{ listobj }} -->
            <div class="action">
                <div class="batch">
                    <input type="checkbox">
                    <a href="javascript:;">删除商品</a>
                    <a href="javascript:;">移入收藏夹</a>
                    <a href="javascript:;">清空失效商品</a>
                </div>
                <div class="total">
                    共 {{ listobj.length }} 件商品，已选择 0 件，商品合计：
                    <span class="red">¥ {{ zongnum }}</span>
                    <button class="buttoncart" @click="placeadd">下单结算</button>
                </div>
            </div>
        </div>
        <Goodstuijina :relevantlist="relevantlist"></Goodstuijina>
    </div>
</template>
<script>
import Goodstuijina from "../goodsdetail/Goodstuijina.vue";
import cartview from "../subcategory/CheckBox.vue";
import BreadItem from "../utils/Bread/BreadItem.vue";
import BreadView from "../utils/Bread/BreadView.vue";
import { getSame, } from "@/utils/api/detail";
import { cartdelapi } from '@/utils/api/cartheapi';
export default {
    components: {
        BreadView,
        BreadItem,
        Goodstuijina,
        cartview
    },
    data() {
        return {
            listobj: [],
            // count:0
            relevantlist: [],
            flag: false
        }
    },
    computed: {
        sum() {
            var numm = 0
            this.listobj.forEach(item => {
                numm += item.nowPrice * item.count
            })
            return numm
        },
        zongnum() {
            var zhongnum = 0
            this.listobj.forEach(item => {
                zhongnum += item.nowPrice * item.count
            })
            return zhongnum
        },

    },
    methods: {
        getlistobj() {
            if (this.$store.state.user.userinfo && this.$store.state.user.userinfo.token) {
                this.$store.dispatch('cart/cartgetlist')
            }
            this.listobj = this.$store.state.cart.list
        },
        placeadd() {
            this.$router.push('/member/checkout')
        },
        chengAll(flag) {
            this.$store.commit('cart/chengAll', flag)
        },
        changone(key) {
            this.$store.commit('cart/chengone', key)
        },
        goodsjian() {
            this.count--
            if (this.count == -1) {
                return this.count = 0
            }
        },
        delobj(key) {
            // this.listobj.splice(key, 1)
            // this.$store.state.cart.delSum(key, 1)
            this.$config({ text: '温溪提示', tite: '是否删除' }).then(async () => {
                if (this.$store.state.user.userinfo && this.$store.state.user.userinfo.token) {
                    let res = await cartdelapi([this.listobj[key].skuId])
                    console.log(res);
                    if (res.msg == "操作成功") {
                        this.$message({ text: '删除成功', type: 'success' })
                        this.getlistobj()
                    }
                    console.log('线上删除');
                } else {
                    console.log('线下删除');
                    this.$store.commit('cart/delSum', key)
                    this.$message({ text: '删除成功', type: 'success' })
                }
            })
        },
        async xuan1(id) {
            var arr = {
                id: id,
                limit: 16,
            };
            let data = await getSame(arr);
            // console.log(data);
            this.relevantlist = data.result;
        },
    },
    mounted() {
        this.xuan1(this.$route.query.id)
        this.getlistobj()

    },
    watch: {
        listobj: {
            handler(val) {
                if (val.length == val.filter(item => item.selected).length) {
                    this.flag = true
                } else {
                    this.flag = false
                }
            },
            deep: true,
            immediate: true
        }
    },
}
</script>
<style lang="scss">
@import "@/assets/css/variables.scss";

.xtx-numbox {
    display: flex;
    align-items: center;

    .label {
        width: 60px;
        color: #999;
        padding-left: 10px;
    }

    .numbox {
        width: 120px;
        height: 30px;
        border: 1px solid #e4e4e4;
        display: flex;

        >a {
            width: 29px;
            line-height: 28px;
            text-align: center;
            background: #f8f8f8;
            font-size: 16px;
            color: #666;

            &:first-of-type {
                border-right: 1px solid #e4e4e4;
            }

            &:last-of-type {
                border-left: 1px solid #e4e4e4;
            }
        }

        >input {
            width: 60px;
            padding: 0 5px;
            text-align: center;
            color: #666;
        }
    }
}

.tc {
    text-align: center;

    .xtx-numbox {
        margin: 0 auto;
        width: 120px;
    }
}

.red {
    color: $priceColor;
}

.green {
    color: $xtxColor
}

.f16 {
    font-size: 16px;
}

.goods {
    display: flex;
    align-items: center;

    img {
        width: 100px;
        height: 100px;
    }

    >div {
        width: 280px;
        font-size: 16px;
        padding-left: 10px;

        .attr {
            font-size: 14px;
            color: #999;
        }
    }
}

.action {
    display: flex;
    background: #fff;
    margin-top: 20px;
    height: 80px;
    align-items: center;
    font-size: 16px;
    justify-content: space-between;
    padding: 0 30px;

    .xtx-checkbox {
        color: #999;
    }

    .batch {
        a {
            margin-left: 20px;
        }
    }

    .red {
        font-size: 18px;
        margin-right: 20px;
        font-weight: bold;
    }
}

.tit {
    color: #666;
    font-size: 16px;
    font-weight: normal;
    line-height: 50px;
}

.xtx-cart-page {
    .cart {
        background: #fff;
        color: #666;

        table {
            border-spacing: 0;
            border-collapse: collapse;
            line-height: 24px;

            th,
            td {
                padding: 10px;
                border-bottom: 1px solid #f5f5f5;

                // input{
                //     width: 20px;
                //     height: 20px;
                // }
                &:first-child {
                    text-align: left;
                    padding-left: 30px;
                    color: #999;
                }
            }

            th {
                font-size: 16px;
                font-weight: normal;
                line-height: 50px;
            }
        }
    }
}

.buttoncart {
    width: 180px;
    height: 50px;
    background-color: #27ba9b;
    color: #fff;
    text-align: center;
    line-height: 50px;
    border: none;
    border-radius: 5px;
}
</style>